<template>
    <div class="recommend">
        <div class="recommend">
            <div class="recommend_top">
                <h3>
                    {{ title }}
                    <img :style="{ width: `${iconSize}px` }" :src="iconUrl" alt />
                </h3>
                <span v-if="showBtn" @click="changeTheNovel(12)">
                    <van-icon name="replay" />换一换
                </span>
            </div>
            <div class="recommend_bottom">
                <div class="item-box" :style="`width:${widthSize}%`"
                    @click="linkToDetail(item.item_id ? item.item_id : item.comic_id)"
                    v-for="(item, index) in recommendFictionData" :key="index">
                    <img v-lazy="item.image ? item.image : item.img" alt />
                    <p>{{ item.title }}</p>
                    <p>{{ item.authors ? item.authors[0] : item.comic_info.main_style_name }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getNewBanner } from "@/api/api";
export default {
    name: "Recommendcp",
    data() {
        return {
            newBannerData: [],
        };
    },
    props: {
        title: {
            type: String,
            default: "热门推荐"
        },
        iconUrl: {
            type: String,
            default: require("../assets/hot.png")
        },
        iconSize: {
            type: Number,
            default: 18
        },
        showBtn: {
            type: Boolean,
            default: true
        },
        widthSize: {
            type: Number,
            default: 31
        },
        recommendFictionData: {
            type: Array
        }
    },
    created() {
        //获取新番推荐的轮播图
        this.changeTheNovel()
        getNewBanner()
            .then(res => {
                if (res.data.code === 0) {
                    this.newBannerData = res.data.data.banner;
                }
            })
            .catch(err => {
                console.log(err);
            });
    },
    methods: {
        //换一换
        changeTheNovel() {
            this.$emit("changeTheNovel")
        },
        //获取漫画小说的id跳转到详情页
        linkToDetail(id) {
            let path = "/detail";
            this.$router.push({
                path,
                query: { comicId: id, path: this.$route.fullPath }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.recommend {
    padding-bottom: 50px;

    .recommend {
        padding: 0 5px;

        .recommend_top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h3 {
                font-size: 18px;
                display: flex;
                align-items: center;

                img {
                    margin-left: 5px;
                    vertical-align: -2px;
                }
            }

            span {
                font-size: 14px;
                cursor: pointer;
                border: 1px solid #1989fa;
                border-radius: 10px;
                padding: 2px;
                line-height: 16px;
            }
        }

        .recommend_bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            .item-box {
                width: 31%;
                padding: 0 4px 10px 4px;

                img {
                    width: 100%;
                    border-radius: 4px;
                }

                p {
                    margin: 0;

                    &:nth-child(2) {
                        font-size: 14px;
                        font-weight: bold;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    &:nth-child(3) {
                        color: #777;
                    }
                }
            }
        }
    }
}
</style>